<template>
    <div style="" class="main" v-if="nodes.indexOf('3')!=-1">
      <!-- 时间选择 -->
      <div class="datetype">
          <div class="dated">
              <el-tabs type="border-card"  v-model="thisQuery.model" @tab-click="handleClickAll">
                <el-tab-pane label="M0" name="0"></el-tab-pane>
                <el-tab-pane label="M1"  name="1"></el-tab-pane>
                <el-tab-pane label="M2"  name="2"></el-tab-pane>
                <el-tab-pane label="M3"  name="3"></el-tab-pane>
                <el-tab-pane label="M3+"  name="4"></el-tab-pane>
              </el-tabs>
          </div>
          
          <div class="block" style="width:350px;float:left">
            <!-- <span class="demonstration">自定义：</span> -->
            <el-date-picker
              v-model="thisQuery.defaultDate"
              @change="handleClickAll"
              type="monthrange"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
          
      </div> 
      <!-- 折线图 -->
      <div class="two_line_box" v-loading="listLoading">
        <div id="two_line" class="two_line"></div>
      </div>
    </div>
</template>

<script>
    import {
      formatDate
    } from '@/utils/formatDate.js';
    import png1 from '@/assets/images/1.png';
    import png2 from '@/assets/images/2.png';
    import png3 from '@/assets/images/3.png';
    import png4 from '@/assets/images/4.png';
    import png5 from '@/assets/images/5.png';
    import png6 from '@/assets/images/6.png';
    import * as echarts from 'echarts';
    import waves from '@/directive/waves' // waves directive
    import {
      getNodes
    } from '@/utils'
    require('echarts/theme/macarons');//引入主题
    require('echarts/theme/shine');//引入主题
    import {
      getOverdueNumShow
    } from '@/api/finance'
    export default {
      directives: {
        waves
      },
      data() {
        return {
          card:{
            img:[png1,png2,png3,png4,png5,png6],
            list:[]
          },
          nodes:[],
          city: [],
          activeName:'2',
         
          thisQuery:{
            model: '0',
            defaultDate: [],  
          },
          chartPie: null,
          chartLine: null,
          chartColumnar: null,
          value:'',
          start:'',
          end:'',
          legendY:'20%',
          legendX:'15%',
          pie_color:['#1890FF', '#36CBCB', '#975FE5','#F2637B', '#FBD437', '#4ECB73','#34E7C9', '#39ACE9', '#F1B919','#EE7953', '#E872AC', '#FD948E',],
          months:[],
        listLoading:true,
          three:{
            interval:0,
            data_x:[],
            overdue_money:[100, 100, 10, 10, 10,10, 10],
            overdue_paid_money:[20, 30, 40, 50,60, 70,70],
            late_fee:[10000, 10000, 10000, 10000, 10000, 10000, 10000],//滞纳金 
            overdue_num:[],
            overdue_paid_num:[]
          },
          
        }
      },
      created(){
          this.get12Month();
          this.getOverdueNumShow();
          this.nodes = getNodes()
      },
      
      methods: {
        getOverdueNumShow(){
          this.listLoading = true
          getOverdueNumShow(this.thisQuery).then(res => {
             this.three.overdue_money = res.data.overdue_money;
             this.three.overdue_paid_money = res.data.overdue_paid_money;
             this.three.late_fee = res.data.overdue_late_fee;        
             this.three.data_x = res.data.data_x;       
             this.three.overdue_num = res.data.overdue_num; 
             this.three.overdue_paid_num = res.data.overdue_paid_num; 
            this.drawLineTwoChart();

          })
        },

        drawLineTwoChart() {
          this.chartLine = echarts.init(document.getElementById('two_line'),'shine');// 基于准备好的dom，初始化echarts实例
          let option = {
              tooltip : {
                  trigger: 'axis',
                  backgroundColor:"#fff", 
                  borderColor:"#eee",
                  borderWidth:1,
                  textStyle:'color:#eee;font-size:12px;',
                  extraCssText: "width:120px;",
                  padding:[20,150,20,20], 
              },
              legend: {
                  data:['应收金额','实收金额','滞纳金']
              },
              color: ['#1890FF', '#2FC25B','#34E7C9','#fff','#fff','#fff'], 
              calculable : true,
              xAxis : [
                  {
                    type : 'category',
                    boundaryGap : false,
                      axisLabel: { //  如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
                      interval: 10, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
                      rotate: 0 // 横坐标上label的倾斜度
                      },
                    axisTick: {
                        show: false
                    },
                    data : this.three.data_x,
                    axisLabel:{
                                interval:this.three.interval,//每四个点显示一个标签
                              }
                  }
              ],
              yAxis: {
                        type: 'value',
                        min: 0, // y轴最小刻度值
                        max:Math.max.apply(null,this.three.overdue_money),
                        splitLine : {
                            lineStyle: {
                                color: ['#eee'],  // 设置网格线颜色
                                width: 1, // 设置网格线宽度
                                type: 'solid' // 设置网格虚线(dashed)、实线(solid)
                            },
                            show: true // 是否显示网格线
                        },
                        axisLine: {
                            lineStyle: {
                                // 设置y轴颜色
                                color: '#555666',
                                type: 'solid'
                            }
                        },
                    },
              
              series : [
                  {
                      name:'应收金额',
                      type:'line',
                      data:this.three.overdue_money,
                      itemStyle: {
                        normal: {
                          lineStyle: {
                            color: "#1890FF"
                          }
                        }
                      },
                      emphasis: {// 高亮
                          label: {
                              show: true,
                              textStyle: {
                                  color: '#333333',
                                  fontWeight: 'bold'
                              }
                          }
                      }
                  },
                  {
                      name:'实收金额',
                      type:'line',
                      data:this.three.overdue_paid_money,
                      show:false,
                      itemStyle: {
                        normal: {
                          lineStyle: {
                            color: "#2FC25B",
                          }
                        }
                      },
                  },
                  {
                      name:'滞纳金',
                      type:'line',
                      data:this.three.late_fee,
                      itemStyle: {
                        normal: {
                          lineStyle: {
                            color: "#34E7C9",
                          }
                        }
                      },
                  },
                  {
                      name:'应收户数',
                      type:'line',
                      data:this.three.overdue_num,
                      itemStyle: {
                        normal: {
                          lineStyle: {
                            color: "rgba(0, 0, 0, 0)",
                          }
                        }
                      },
                  },
                  {
                      name:'实收户数',
                      type:'line',
                      data:this.three.overdue_paid_num,
                      itemStyle: {
                        normal: {
                          lineStyle: {
                            color: "rgba(0, 0, 0, 0)",
                          }
                        }
                      },
                  }
              ],
              grid:{
                     left:"7%"  ,
                     right:"5%"  
                }
          };
          // 使用刚指定的配置项和数据显示图表
          this.chartLine.resize();//直接加这句即可
          this.chartLine.setOption(option);
          this.listLoading = false
        },
       
        handleClickAll(tab, event) {
          this.getOverdueNumShow();
        }, 
        get12Month(){
          var dataArr = [];
          var data = new Date();
          var year = data.getFullYear();
          data.setMonth(data.getMonth()+1, 1)//获取到当前月份,设置月份
          for (var i = 0; i < 12; i++) {
            data.setMonth(data.getMonth() - 1);//每次循环一次 月份值减1
              var m = data.getMonth() + 1;
              m = m < 10 ? "0" + m : m;
              dataArr.unshift(data.getFullYear() + "-" + (m))
          }
          this.months = dataArr;
          this.thisQuery.defaultDate = [dataArr[0],dataArr[11]]
          return dataArr
        }
      }
    }
</script>

<style  scope>
    .card_box{
        width:30%;background: #fff;border-radius: 8pt;margin-top:24pt;background-repeat: no-repeat;background-size: 100% 100%;
        height:7.5%;margin-top: 24pt;margin-left: 2%;float:left;color:#fff;position: relative;
    }
    .card_title{top:8.5%;left: 8.5%;font-size: 14px;position: absolute;}
    .all_count{top:30%;left: 8.5%;font-size: 14px;position: absolute;}
    .all_count_num{font-weight: 700;font-size: 38px;}
    .cardlists{width: 83%;height: 23.4%;top:76.5%;left:8.5%;position: absolute;
                border-top:1px solid #e8e8e8;line-height: 44pt;font-size: 14px;}
    .numm{font-weight: 600;}

    .rank{width: 90%;margin-left: 5%;
      /* border:1px solid red */
      }
    .gd{width: 50%;float: left;color:#555658;font-size: 14px;cursor: pointer;}
    .defualt{width: 50%;float: left;}
    .gdchoose1{color:#1890FF}
    .gd .el-tabs__nav-wrap::after { background-color:#fff !important;}

    .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input,
     .el-date-editor--timerange.el-input__inner{width:100% !important;}
     .el-radio-button__orig-radio:checked + .el-radio-button__inner{color:#1890FF;background-color: #fff;}
    .el-tabs--border-card{box-shadow:none;border:none;width: 348pt;height: 24pt;border:1px solid #eee}
    .el-tabs--border-card > .el-tabs__header{border-bottom: none;background-color:#fff}
    .el-tabs--border-card > .el-tabs__header .el-tabs__item{border:#DCDFE6 1px solid;width: 70pt;text-align: center;}
    /* .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{border:#1890ff 1px solid;} */
    .el-range-editor--medium.el-input__inner{height: 30pt;margin-top: 1px;border-radius: 0;}

    .list_box{width: 90%;margin-left: 5%;height: 260pt;margin-top:40pt;overflow: auto;}
    .list_box::-webkit-scrollbar{width: 2pt;}
    .list_box::-webkit-scrollbar-thumb{width: 2pt;background: #D9EDFF;}
    .list_box::-webkit-scrollbar-button{display:none}
    .lis{width: 100%;height: 40pt;border:1px solid #fff;line-height: 40pt;font-size: 15px;color:#555658;border-bottom:1px solid #e8e8e8;}
    .num{
      width:20px;height:20px;background:#F0F2F5;
       margin-top: 13pt;
      line-height: 20px;;color:#555658;
      border-radius: 20px;text-align: center;}
    .firstt{background:#FFD13B;color:#fff;}
    .second{background:#ECECDB;color:#fff;}
    .third{background:#E6812F;color:#fff;}
    .main{width:100%;height:2100pt;background:#F0F2F5;padding-top:24pt;font-size: 12pt;color:#000;}
    .datetype{
      width: 100%;height: 32pt;
      margin-left: 2%;
    }
    .dated{
      width: 370pt;height: 100%;float: left;border:1px solid #eee
    }
    .dated .el-tabs__content{display:none;}
    .dated .el-tabs__nav-scroll{width: 370pt;}
    .grid-content{border: 1px solid #ccc;cursor: pointer;
          height: 32pt;line-height:32pt;text-align: center;}
    .pie-wrap{
        width:100%;
        height:350pt;
    }
    .title{color:#86888b;font-size: 15px;margin-left: 5%;}
    .title2{color:#1890FF;font-size: 15px;margin-left: 5%;}
    .allmoney{color:#242526;font-size: 18px;margin-left: 5%;margin-top: 8pt;font-weight: 800;}
    .one_line_box{
        width:46%;background: #fff;border-radius: 2pt;padding-top:20pt ;
        height:188pt;margin-top: 24pt;margin-left: 2%;float: left;
    }
    .two_line_box{
       width:94%;background: #fff;border-radius: 2pt;
        height:376pt;margin-top: 24pt;margin-left: 2%;float:none
    }
    .one_pie_box{
        width:46%;background: #fff;border-radius: 2pt;
        height:404pt;margin-top: 24pt;margin-left: 2%;float:left;padding-top:24pt;
    }
     .one_line,.line-columnar{
        width:100%;
        height:58pt;
    }
    .two_line{
       width:100%;
        height:100%;
    }
    .hr{width: 90%;margin-left: 5%;margin-top: 16pt;border:#e8e8e8 1px solid}
    .datas{width: 90%;margin-left: 5%;margin-top:20pt;}
    .datas2{width: 90%;margin-left: 5%;margin-top:16pt;line-height: 20px;}
    .labels{color:#86888b;font-size: 14px;}
    .jenos{color:#212121;font-size: 14px;font-weight:600 ;}
    .jenos2{color:#86888b;font-size: 14px;}
    .clear {clear: both;}
    
</style>